<template>
  <div class="content">
    <ul class="moreselect_content">
      <li v-for="(product, index) in products" :class="{cur: index === isSelected }" @click="navClick(index)">{{ product.pname }}</li>
    </ul>
    <div :style="{marginTop:marginTop + 'px',height: contentHeight + 'px'}" class="example_content">
      <template v-for="(product, index) in products">
        <router-link :to="'/user/productDetails/'+ product.pid">
          <div class="picture_content">
            <p class="product_name">
              {{ product.pname }}
            </p>
            <div class="img_pl">
              <img :src="product.pmoreImg">
            </div>
          </div>
        </router-link>
      </template>
    </div>
  </div>
</template>

<script>
import indexApi from '@/api/photo/indexApi'
export default {
  name: 'MoreProduct',
  data() {
    return {
      isSelected: 0,
      cid: '',
      products: [],
      marginTop: 135,
      contentHeight: 532
    }
  },
  created() {
    this.cid = this.$route.params && this.$route.params.cid
    this.getMoreProduct()
  },
  mounted: function() {
    const self = this
    const doc = document
    this.$nextTick(() => {
      self.$nextTick(() => {
        const $scrollBox = doc.querySelector('.example_content')
        const moreSelectContent = doc.querySelector('.moreselect_content')
        self.marginTop = moreSelectContent.clientHeight
        const scrollCallback = self.debounce(function() {
          const pictureContent = document.querySelector('.picture_content')
          const top = $scrollBox.scrollTop // 设置变量top,表示当前滚动条到顶部的值
          // const tt = $scrollBox.clientHeight / self.products.length // 设置变量tt,表示当前滚动窗口高度的值
          const tt = pictureContent.clientHeight  //设置变量tt,表示当前滚动窗口高度的值
          let num = 0
          for (let n = 0; n < self.products.length; n++) {
            // 在此处通过判断滚动条到顶部的值和当前窗口高度的关系
            // （当前窗口的n倍 <= top <= 当前窗口的n+1倍）来取得和导航索引值的对应关系
            if (top >= n * tt && top <= (n + 1) * tt) {
              num = n
            }
            self.isSelected = num
          }
        }, 100)
        $scrollBox.addEventListener('scroll', scrollCallback)
      })
    })
  },
  updated: function() {
    const doc = document
    const moreSelectContent = doc.querySelector('.moreselect_content')
    this.marginTop = moreSelectContent.clientHeight + 10
    let winHeight
    if (window.innerHeight) {
      winHeight = window.innerHeight
    } else if ((document.body) && (document.body.clientHeight)){
      winHeight = document.body.clientHeight
    } else if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
      winHeight = document.documentElement.clientHeight
    }
    this.contentHeight = winHeight - moreSelectContent.clientHeight - 10
  },
  methods: {
    getMoreProduct() {
      indexApi.getMoreProduct({ cid: this.cid }).then(data => {
        this.products = data
      })
    },
    // 防抖
    debounce(func, wait, immediate) {
      let timeout, args, context, timestamp, result
      const later = function() {
        // 据上一次触发时间间隔
        const last = new Date() - timestamp
        // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
        if (last < wait && last > 0) {
          timeout = setTimeout(later, wait - last)
        } else {
          timeout = null
          // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
          if (!immediate) {
            result = func.apply(context, args)
            if (!timeout) context = args = null
          }
        }
      }

      return function() {
        context = this
        args = arguments
        timestamp = new Date()
        const callNow = immediate && !timeout
        // 如果延时不存在，重新设定延时
        if (!timeout) timeout = setTimeout(later, wait)
        if (callNow) {
          result = func.apply(context, args)
          context = args = null
        }
        return result
      }
    },
    navClick: function(index) {
      const scrollBox1 = document.querySelector('.example_content')
      const pictureContent = document.querySelector('.picture_content')
      scrollBox1.scrollTo(0, index * pictureContent.clientHeight)
      this.isSelected = index
    }
  }
}
</script>

<style scoped>
  @import "../../assets/css/iconfont.css";
  @import "../../assets/css/login_selfcenter.css";
  @import "../../assets/css/index_appointment.css";
  @import "../../assets/css/reset.css";
  .example_content {
    overflow: scroll;
  }
</style>
